<template>
  <div>
    <el-table
      :data="this.tableData"
      size="small"
      row-class-name="row"
      cell-class-name="column"
      :highlight-current-row="true"
      border
      style="width: 100%; margin-top: 20px"
      fit
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        label="选项"
        class="tab-column-item"
        v-if="isNeedSelect"
      ></el-table-column>

      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :prop="item.prop"
        :width="item.width"
        :label="item.label"
        class="tab-column-item"
       
      >
        <template slot-scope="scope">
          <div v-if="item.isOpera">
            <template v-for="(aItem, aIndex) in item.actionList" >
              <div class="action-item" :key="aIndex">
                <el-button
                  type="primary"
                  size="small"
                  class="margin-top:2px;"
                  @click="handleClick(scope.row, aItem.name)"
                  >{{ aItem.name }}
                </el-button>
              </div>
            </template>
          </div>
          <!-- <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
            v-if="item.isOpera"
            >{{ scope.row[item.prop] }}</el-button
          > -->
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="120" align="center" v-if="isOpera">
        <template 
          v-for="(item, index) in items"
          slot-scope="scope">
              <div class="action-item" :key="index">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleActionClick(scope.row,index)"
                    >{{ item.name }}
                  </el-button>
              </div>
          </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
//  :row-style="setRowStyle"
// :cell-style="setColumnStyle"
export default {
  name: "ElementTable",
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    tableLabel: {
      type: Array,
      default: () => {
        return [];
      },
    },
    isNeedSelect: {
      type: Boolean,
      default: false,
    },
   
  },
  data() {
    return {};
  },
  methods: {
    handleClick(rowItem,name) {
      this.$emit("fatherTable", rowItem,name);
    },
    //选了多少个选项
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
  },
};
</script>
<style lang="css" scoped>
.tab-column-item {
  flex: 1;
}
</style>